{% load i18n %}
<header class="card mb-2 navbar navbar-expand-md navbar-light d-print-none">
  <div class="container-xl">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar-menu">
      <div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
        <ul class="navbar-nav">
          <li class="nav-item {% if 'overview' in request.path %}active{% endif %}">
            <a class="nav-link" href="{% url 'people:new_hire' object.id %}" role="button" aria-expanded="false">
              <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                   <polyline points="5 12 3 12 12 3 21 12 19 12"></polyline>
                   <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
                   <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path>
                </svg>
              </span>
              <span class="nav-link-title">
                {% translate "Overview" %}
              </span>
            </a>
          </li>
          <li class="nav-item {% if 'profile' in request.path %}active{% endif %}">
            <a class="nav-link" href="{% url 'people:new_hire_profile' object.id %}" role="button" aria-expanded="false">
              <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                   <circle cx="12" cy="7" r="4"></circle>
                   <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
                </svg>
              </span>
              <span class="nav-link-title">
                {% translate "Profile" %}
              </span>
            </a>
          </li>
          <li class="nav-item {% if 'access' in request.path %}active{% endif %}">
            <a class="nav-link" href="{% url 'people:new_hire_access' object.id %}" role="button" aria-expanded="false">
              <span class="nav-link-icon d-md-none d-lg-inline-block">
                {% include '_integration_config.html' %}
              </span>
              <span class="nav-link-title">
                {% translate "Access" %}
              </span>
            </a>
          </li>
          <li class="nav-item {% if '/tasks/' in request.path %}active{% endif %}">
            <a class="nav-link" href="{% url 'people:new_hire_tasks' object.id %}" role="button" aria-expanded="false">
              <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-columns" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                   <line x1="4" y1="6" x2="9.5" y2="6"></line>
                   <line x1="4" y1="10" x2="9.5" y2="10"></line>
                   <line x1="4" y1="14" x2="9.5" y2="14"></line>
                   <line x1="4" y1="18" x2="9.5" y2="18"></line>
                   <line x1="14.5" y1="6" x2="20" y2="6"></line>
                   <line x1="14.5" y1="10" x2="20" y2="10"></line>
                   <line x1="14.5" y1="14" x2="20" y2="14"></line>
                   <line x1="14.5" y1="18" x2="20" y2="18"></line>
                </svg>
              </span>
              <span class="nav-link-title">
                {% translate "Tasks" %}
              </span>
            </a>
          </li>
          <li class="nav-item {% if 'progress' in request.path %}active{% endif %}">
            <a class="nav-link" href="{% url 'people:new_hire_progress' object.id %}" role="button" aria-expanded="false">
              <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chart-bar" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                   <rect x="3" y="12" width="6" height="8" rx="1"></rect>
                   <rect x="9" y="8" width="6" height="12" rx="1"></rect>
                   <rect x="15" y="4" width="6" height="16" rx="1"></rect>
                   <line x1="4" y1="20" x2="18" y2="20"></line>
                </svg>
              </span>
              <span class="nav-link-title">
                {% translate "Progress" %}
              </span>
            </a>
          </li>
          <li class="nav-item {% if 'forms' in request.path %}active{% endif %}">
            <a class="nav-link" href="{% url 'people:new_hire_forms' object.id %}" role="button" aria-expanded="false">
              <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-forms" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                   <path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path>
                   <path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path>
                   <path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path>
                   <path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path>
                   <path d="M17 12h.01"></path>
                   <path d="M13 12h.01"></path>
                </svg>
              </span>
              <span class="nav-link-title">
                {% translate "Forms" %}
              </span>
            </a>
          </li>
          <li class="nav-item {% if 'notes' in request.path %}active{% endif %}">
            <a class="nav-link" href="{% url 'people:new_hire_notes' object.id %}" role="button" aria-expanded="false">
              <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-notes" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                   <rect x="5" y="3" width="14" height="18" rx="2"></rect>
                   <line x1="9" y1="7" x2="15" y2="7"></line>
                   <line x1="9" y1="11" x2="15" y2="11"></line>
                   <line x1="9" y1="15" x2="13" y2="15"></line>
                </svg>
              </span>
              <span class="nav-link-title">
                {% translate "Notes" %}
              </span>
            </a>
          </li>
          <li class="nav-item {% if 'admin_tasks' in request.path %}active{% endif %}">
            <a class="nav-link" href="{% url 'people:new_hire_admin_tasks' object.id %}" role="button" aria-expanded="false">
              <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-list-check" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                   <path d="M3.5 5.5l1.5 1.5l2.5 -2.5"></path>
                   <path d="M3.5 11.5l1.5 1.5l2.5 -2.5"></path>
                   <path d="M3.5 17.5l1.5 1.5l2.5 -2.5"></path>
                   <line x1="11" y1="6" x2="20" y2="6"></line>
                   <line x1="11" y1="12" x2="20" y2="12"></line>
                   <line x1="11" y1="18" x2="20" y2="18"></line>
                </svg>
              </span>
              <span class="nav-link-title">
                {% translate "Admin Tasks" %}
              </span>
            </a>
          </li>
          <li class="nav-item {% if 'welcome_messages' in request.path %}active{% endif %}">
            <a class="nav-link" href="{% url 'people:new_hire_welcome_messages' object.id %}" role="button" aria-expanded="false">
              <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-dots" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                   <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4"></path>
                   <line x1="12" y1="11" x2="12" y2="11.01"></line>
                   <line x1="8" y1="11" x2="8" y2="11.01"></line>
                   <line x1="16" y1="11" x2="16" y2="11.01"></line>
                </svg>
              </span>
              <span class="nav-link-title">
                {% translate "Welcome Messages" %}
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>
